<template>
  <view class="ui-coupon" :style="backgroundImage">
    <view class="coupon-container" :style="{ 'background-color':color }">
      <view class="coupon-content ui-flex">
        <!-- 优惠券价格部分 -->
        <view class="coupon-main">
          <!-- 价格 -->
          <view class="coupon-main--price ui-txt txt-lg">
            <text class="ui-txt txt-caption-sm">{{ unit }}</text>
            <uiPrice
              :color="color"
              :size="48"
              :price="number"
              :decimalDigits="0"
              :needSymbol="false"
              :thousands="false"
            ></uiPrice>
          </view>
          <!-- 使用条件 -->
          <view
            class="coupon-main--conditions ui-txt txt-caption-sm"
            :style="{ color:color}"
          >{{ txt }}</view>
        </view>
        <view class="coupon-info">
          <!-- 类型 -->
          <view class="coupon-info--title ui-txt txt-heading">{{ title }}</view>
          <!-- 有效期 -->
          <view class="coupon-info--validity ui-txt txt-caption-sm">{{ desc }}</view>
        </view>
      </view>
      <view class="coupon-action">{{ btn }}</view>
    </view>
  </view>
</template>

<script>
import uiPrice from "components/base/price/index.vue";

export default {
  name: "uiFooter",
  components: { uiPrice },
  props: {
    // 颜色背景颜色
    color: {
      type: String,
      default: "#A7A7A7"
    },
    // 左侧区域背景颜色
    ltBg: {
      type: String,
      default: "#A7A7A7"
    },
    //高度 单位 rpx
    height: {
      type: Number,
      default: 250
    },
    //单位 : ￥
    unit: {
      type: String,
      default: "￥"
    },
    //价格
    number: {
      type: [Number, String],
      default: 0
    },
    //数值下面的描述
    txt: {
      type: String,
      default: "满100元使用"
    },

    //标题
    title: {
      type: String,
      default: "全场打折券"
    },
    desc: {
      type: String,
      default: "有效期至 2020-05-20"
    },
    // 领取按钮文本
    btn: {
      type: String,
      default: "领取"
    },
    // 已领取数量描述
    drawed: {
      type: String,
      default: "已抢2000张"
    },

    status: {
      type: Number,
      default: 1
    }
  },
  computed: {
    // 生成背景
    backgroundImage() {
      return `background-image: radial-gradient(transparent 0, transparent ${this.px(
        12
      )}, ${this.color} ${this.px(12)});
        background-image: -webkit-radial-gradient(transparent 0, transparent ${this.px(
          12
        )}, ${this.color} ${this.px(12)});`;
    }
  },
  methods: {
    px(num) {
      return uni.upx2px(num) + "px";
    }
  }
};
</script>

<style lang="scss">
$coupon-height: 170upx;

.ui-coupon {
  // background-image: radial-gradient(transparent 0, transparent 12upx, #e24141 12upx);
  background-size: 40upx 40upx;
  background-position: 52upx 6upx;
  /* 相对定位，让before伪元素方便定位 */
  position: relative;
  width: 100%;
  min-height: $coupon-height;
  padding-right: 14upx;
  box-sizing: border-box;

  .coupon-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 1;
    height: $coupon-height;

    .coupon-content {
      flex: 1;
      background-color: $fill-base;
      height: 100%;
      border-top-right-radius: 10upx;
      border-bottom-right-radius: 10upx;

      .coupon-main {
        text-align: center;
        padding: 20upx;

        border: none;
        border-right: 1px dashed $color-text-base;
      }
      .coupon-info {
        padding-left: 20upx;
      }
      .coupon-main--conditions,
      .coupon-info--validity {
        margin-top: 16upx;
      }
    }

    .coupon-action {
      flex: 0 0 120upx;
      text-align: center;
      color: $color-text-base-inverse;
    }
  }
}
</style>
